<template>
  <el-input class="mt-2" v-model="filterText" :placeholder="props.placeholder" />
  <div class="overflow-y-auto tree-div">
    <el-tree
      :data="columnDepartmentOptions"
      :props="props.defaultProps"
      @node-click="handleNodeClick"
      highlight-current
      :expand-on-click-node="false"
      node-key="id"
      ref="treeList"
      class="tree"
      :filter-node-method="filterNode"
      :default-expanded-keys="[2]"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <productPopover :info="data" @node-click="handleNodeClick" />
          <span style="color: #cccccc">{{
            props.type == "spu"
              ? data.spu_count || "0"
              : props.type == "sku"
              ? data.sku_count || "0"
              : ""
          }}</span>
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script setup name="SelectCategoryTree">
import useCommonStore from "@/store/modules/common";
import productPopover from "./product-popover.vue";
import { onMounted } from "vue";
import { getOrganizationList } from "./api.js";
import { getColumnsDepartment } from "@/api/index.js";

const props = defineProps({
  placeholder: {
    type: String,
    default: "请输入",
  },
  defaultProps: {
    type: Object,
    default: {
      label: "name",
      children: "sub",
    },
  },
  type: {
    type: String,
    default: "",
  },
});

const data = reactive({
  columnDepartmentOptions: [],
  treeList: [],
  filterText: "",
  categoryType: "1",
});

const { columnDepartmentOptions, treeList, filterText, categoryType } = toRefs(data);
// 监听搜索输入框
watch(filterText, (val) => {
  treeList.value.filter(val);
});
// tree 过滤方法
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};

const emit = defineEmits(["node-click"]);

const handleNodeClick = (data) => {
  emit("node-click", data);
};

const getList = async () => {
  try {
    const requestFun =
      categoryType.value == "1" ? getOrganizationList : getColumnsDepartment;
    const res = await requestFun();
    const options = res.data;
    columnDepartmentOptions.value = res.data[1].sub;
    // columnDepartmentOptions.value = options.filter((i) => {
    //   if (i.name != "无部门人员") {
    //     return i;
    //   }
    // });
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.tree-div {
  height: calc(100vh - 220px);
}
.tree {
  width: 100%;
  padding-top: 5px;

  &:deep(.el-tree-node) {
    padding: 5px 0;
  }

  .custom-tree-node {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    width: 100%;

    span {
      align-self: center;
    }

    .lable {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .status {
      font-size: 12px;
      color: #cdcfd4;
    }
  }

  &:deep(.el-tree-node__content) {
    padding-right: 10px;
    background-color: transparent;
  }
}
</style>
